<template id="ShowCollection">
  <div class="ShowCollection">
    <go-to-back path="/mail/productItem" />
    <div class="pc">
      <div class="productItem">
        <p class="collectionTitle">查看藏品</p>
        <div class="productImage"><img :src="productData.image" /></div>
        <p class="productTitle">{{ productData.goods_name }}</p>
        <p class="collectionTitle phoneTitle">商品描述</p>
        <div class="productDesc">
          <span>{{ productData.goods_desc }}</span>
        </div>
      </div>
    </div>
    <div class="phone">
      <!-- 头部导航和图片背景区域 -->
      <div class="productBg">
        <img class="phoneProductImg" :src="productData.image" />
        <img class="phoneProductBg" :src="phoneProductBg" />
        <div class="phoneOptions">
          <div class="phoneback">
            <img :src="phoneBackIcon" @click="gotoCurrentOwnedPage" />
          </div>
        </div>
      </div>
      <!-- 中间描述信息区域 -->
      <div class="phoneProductInfo">
        <img :src="phoneProductInfoBg" class="phoneProductInfoBg" />
        <p class="phoneProductTitle">
          {{ productData.goods_name }}
        </p>
        <p class="uBuy" v-if="advance_buy.advance_buy_status === 1">
          <span>{{ advance_buy.advance_buy_txt }}</span>
          <span>{{ advance_buy.gold_buy_txt }}</span>
        </p>

        <div class="defaultPath" v-if="productData.icon">
          <img :src="productData.icon" class="defaultHeadIcon" />
          <p class="defaultName">{{ productData.authorize }}</p>
        </div>
        <div class="phoneProductDesc" v-html="productData.goods_desc"></div>
      </div>
      <!-- 底部转赠按钮区域 -->
      <div class="phoneBottom">
        <div class="bottomContent">
          <!-- <md-button
            class="buyButton"
            @click="checkPasson"
            :class="{ buyButton_not: cantSubmit }"
            :disabled="cantSubmit"
          >
            <span>{{ btnShow }}</span>
          </md-button> -->
          <md-button
            class="buyButton"
            @click="gotoLocalTrade"
            :class="{ buyButton_not: cantSubmit }"
            :disabled="cantSubmit"
          >
            <span>{{ btnShow }}</span>
          </md-button>
        </div>
      </div>
      <!-- 动作面板区域 -->
      <van-popup class="phonePop" v-model="showPopUp" position="bottom">
        <div class="popTop">
          <p>转赠</p>
          <img :src="closeIcon" class="closeIcon" @click="closePop" />
        </div>
        <div class="popCenter">
          <p class="smallTitle">钱包地址</p>
          <div class="popAddress">
            <input v-model="formData.address" ref="address" placeholder="请输入钱包地址" />
            <img
              :src="closeReset"
              class="closeReset"
              v-if="formData.address"
              @click="resetAddress"
            />
          </div>
          <div class="wallet_desc">
            <img :src="phoneWalletDesc" />
            <p>转赠功能为不可逆操作，请您仔细核对地址以免造成损失</p>
          </div>
          <div class="popBottom">
            <p class="smallTitle">输入密码</p>
            <div class="popPassword">
              <div
                class="passWordGroup"
                v-for="(item, index) in formData.passwordList"
                :key="index"
              >
                <input
                  v-model="item.value"
                  maxlength="1"
                  :ref="`ref${index}`"
                  @input="onInput(index)"
                  @keyup.delete="onDelete(index)"
                  type="tel"
                />
                <div class="circleBox" :class="{ isShow: item.value }" @click="focusInput(index)">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
            <p class="popForgot" @click="forgotPassWord">忘记密码</p>
          </div>
          <md-button class="passOnButton" @click="passOn">
            <span>确定转赠</span>
          </md-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import GoToBack from "./components/GoToBack.vue";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {
  getOrderInfoApi,
  transferTokenApi,
  getUserInfoApi,
  checkTransferUserApi,
  myPieceDetailApi,
  transforeApi
} from "@/api";
import { iscode, isApp, isWeixin } from "@/utils";
import { getCookie } from "@/utils/cookie";
export default {
  name: "ShowCollection",
  components: { GoToBack },
  // 定义属性
  data() {
    return {
      phoneWalletDesc: require("@/assets/images/pc_black/center/tip.png"),
      phoneProductBg: require("@/assets/images/mobile/productBg.png"),
      phoneBackIcon: require("@/assets/images/mobile/phoneBack.png"),
      phoneProductInfoBg: require("@/assets/images/mobile/phoneProductInfoBg.png"),
      defaultHeadIcon: require("@/assets/images/mobile/defaultHeadIcon.png"),
      closeIcon: require("@/assets/images/mobile/closeIcon.png"),
      closeReset: require("@/assets/images/mobile/closeReset.png"),
      productData: {},
      showPopUp: false,
      hasPassword: "",
      formData: {
        address: "",
        passwordList: [
          { value: "" },
          { value: "" },
          { value: "" },
          { value: "" },
          { value: "" },
          { value: "" }
        ],
        password: ""
      },
      // 是否禁止点击转赠按钮
      cantSubmit: false,
      // 转赠按钮的显示，如果是"计时"，则显示countCtx里的倒计时时间
      btnShow: "挂售",
      // 购买次数权益数据
      advance_buy: {},
      // 是否是碎片
      isPresent: false
    };
  },
  // 方法集合
  methods: {
    // ------ async ------
    async getUserInfo() {
      let result = await getUserInfoApi({
        token: getCookie("token") || JSON.parse(window.localStorage.getItem("token"))
      });
      this.hasPassword = result.result.is_pwd;
    },
    async getOrderInfo() {
      let result = await getOrderInfoApi({ id: this.$route.query.order_id });
      if (iscode(result)) {
        const resData = result.result;
        this.productData = result.result.goods_info;
        this.btnShow = result.result.transfer_info.transfer_txt;

        // 先判断是否已转赠、已消耗、已挂售
        if (resData.status == 3) {
          this.btnShow = "已转赠";
          this.cantSubmit = true;
        } else if (resData.status == 99) {
          this.btnShow = "已消耗";
          this.cantSubmit = true;
        } else if (resData.status == 98) {
          this.btnShow = "挂售中";
          this.cantSubmit = true;
          this.isPresent = false; // 去转赠
        } else {
          // 再判断是否是同步状态 is_sync：1则已同步，则去挂售。0则未同步，则去转赠
          if (resData.goods_info.is_sync == 1) {
            this.btnShow = "挂售";
            this.cantSubmit = false;
            this.isPresent = false; // 去挂售
          } else {
            this.btnShow = resData.transfer_info.transfer_txt;
            if (resData.transfer_info.is_transfer == 1) {
              this.cantSubmit = false;
            } else {
              this.cantSubmit = true;
            }
            this.isPresent = true; // 去转赠
          }
        }

        this.$set(
          this.advance_buy,
          "advance_buy_status",
          result.result.advance_buy.advance_buy_status
        );
        this.$set(this.advance_buy, "advance_buy_txt", result.result.advance_buy.advance_buy_txt);
        this.$set(this.advance_buy, "gold_buy_txt", result.result.advance_buy.gold_buy_txt);
        this.$set(
          this.productData,
          "image",
          result.result.show_url + result.result.goods_info.images[0]
        );
        this.$set(this.productData, "icon", result.result.show_url + result.result.goods_info.icon);
      }
    },
    // 获取碎片信息
    async myPieceDetail() {
      let res = await myPieceDetailApi({
        id: this.$route.query.order_id
      });
      if (iscode(res)) {
        let resData = res.result;

        let fragInfo = JSON.parse(localStorage.getItem("fragInfo"));
        if (fragInfo) {
          this.$set(this.productData, "goods_name", fragInfo.name);
          this.$set(this.productData, "goods_desc", fragInfo.intro);
          this.$set(this.productData, "image", fragInfo.show_url + fragInfo.icon);
          this.btnShow = resData.transfore.transfer_txt;
          if (resData.transfore.is_transfer - 0 === 1) {
            this.cantSubmit = false;
          } else {
            this.cantSubmit = true;
          }
        }
        this.isPresent = true;
      }
    },
    async passOn() {
      if (!this.formData.address) {
        this.$toast("钱包地址不能为空");
        return;
      } else if (!this.formData.password) {
        this.$toast("支付密码不能为空");
        return;
      }
      this.checkTransferUser();
    },
    async checkTransferUser() {
      let res = await checkTransferUserApi({
        toaddress: this.formData.address
      });
      if (iscode(res)) {
        let result = null;
        if (this.$route.query.icon == 1) {
          result = await transforeApi({
            password: this.formData.password,
            toaddress: this.formData.address,
            id: this.$route.query.order_id
          });
        } else {
          result = await transferTokenApi({
            password: this.formData.password,
            toaddress: this.formData.address,
            order_id: this.$route.query.order_id
          });
        }
        if (iscode(result)) {
          this.$toast({
            message: "转赠成功",
            className: "loading_style"
          });
          setTimeout(() => {
            this.$router.push("/personalCurrentlyOwned");
          }, 800);
        }
      }
    },

    //  ------ common ------
    checkPasson() {
      if (this.hasPassword) {
        this.showPopUp = true;
      } else {
        this.$router.push("/setPassword");
      }
    },
    forgotPassWord() {
      this.$router.push("/resetPassword");
    },
    closePop() {
      this.showPopUp = false;
      this.formData.address = "";
      this.formData.password = "";
      this.formData.passwordList = [
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" }
      ];
    },
    resetAddress() {
      this.formData.address = "";
      this.$refs.address.focus();
    },
    onInput(index) {
      let inputValue = "";
      this.formData.passwordList.forEach((item) => {
        inputValue = inputValue + item.value;
      });
      this.formData.password = inputValue;
      if (this.formData.password.length >= 6) {
        this.$refs["ref" + index][0].blur();
      } else if (this.formData.passwordList[index].value && index < 5) {
        this.$refs["ref" + (index + 1)][0].focus();
      }
    },
    onDelete(index) {
      if (index > 0) {
        this.$refs["ref" + (index - 1)][0].focus();
      }
    },
    focusInput(index) {
      this.$refs["ref" + index][0].focus();
    },
    // 跳转到当前拥有界面
    gotoCurrentOwnedPage() {
      if (this.$route.query.bought) {
        this.$router.push("/personalCurrentlyOwned");
      } else {
        this.$router.go(-1);
      }
    },
    // 跳转到第三方交易平台
    gotoLocalTrade() {
      if (this.isPresent) {
        this.checkPasson();
      } else {
        const isApp = JSON.parse(window.localStorage.getItem("isApp"));
        if (isApp) {
          this.$router.push("/trade");
        } else {
          if (isWeixin()) {
            this.$toast("请在APP中打开");
            setTimeout(() => {
              this.$router.push("/appDownload");
            }, 1000);
          } else {
            window.open("https://www.zgipmall.com/cr_mobile//#/register/0000004", "_blank");
          }
        }
      }
    }
  },

  // ------ 生命周期 ------
  mounted() {
    this.getUserInfo();
    if (this.$route.query.icon == 1) {
      this.myPieceDetail();
    } else {
      this.getOrderInfo();
    }
  }
};
</script>

<style lang="less" scoped>
.ShowCollection {
  p {
    margin: 0;
  }

  .pc {
    .productItem {
      .collectionTitle {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4d4d4d;
        margin-bottom: 20px;
      }

      .productImage {
        text-align: center;

        img {
          width: 539px;
          height: 570px;
        }

        margin-bottom: 20px;
      }

      .productTitle {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        text-align: center;
        margin-bottom: 45px;
      }

      .productDesc {
        min-height: 120px;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        padding: 21px 15px;
      }
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .ShowCollection {
    .pc {
      display: none;
    }

    .phone {
      display: block;

      .productBg {
        display: block;
        width: 100%;
        position: relative;

        .phoneProductImg {
          width: 100%;
          // height: 720px;
        }

        .phoneProductBg {
          width: 100%;
          // height: 720px;
          position: absolute;
          bottom: 0;
          left: 0;
          opacity: 0.6;
        }

        .phoneOptions {
          padding: 0 30px;
          position: absolute;
          top: 34px;
          left: 0;
          z-index: 5;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;

          .phoneback {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(3px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 40px;
              height: 40px;
            }
          }
        }
      }

      .phoneProductInfo {
        // margin: -150px 30px 0 30px;
        margin: -20px 30px 0 30px;
        min-height: 364px;
        background: #2b2c2d;
        border-radius: 12px;
        padding: 40px 30px;
        position: relative;
        margin-bottom: 360px;
        // display: none;

        .phoneProductInfoBg {
          width: 390px;
          height: 302px;
          position: absolute;
          top: 3px;
          right: 3px;
        }

        .phoneProductTitle {
          position: relative;
          z-index: 2;
          font-size: 40px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 30px;
          line-height: 52px;
        }
        .uBuy {
          display: flex;
          flex-direction: column;
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          // margin-left: 10px;
          margin-bottom: 30px;
          transform: translateY(-10px);

          span:first-child {
            margin-bottom: 5px;
          }
        }

        .defaultPath {
          display: flex;
          align-items: center;
          margin-bottom: 30px;

          .defaultHeadIcon {
            width: 46px;
            height: 46px;
            margin-right: 20px;
          }

          .defaultName {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .phoneProductDesc {
          position: relative;
          z-index: 2;
          overflow: hidden;
          color: #959596;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 44px;
          position: relative;
        }
      }

      .phoneBottom {
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;

        .bottomContent {
          padding: 26px 30px 66px 30px;
          display: flex;
          align-items: center;
          justify-content: center;

          .buyButton {
            margin: 0;
            width: 690px;
            height: 72px;
            color: #1e2020 !important;
            background-color: transparent !important;
            background-image: url("../../../../assets/images/mobile/passon.png");
            background-size: 100% 100%;
            font-size: 28px;
            font-weight: 600;
            box-shadow: none;

            span {
              font-size: 28px;
            }
          }
          .buyButton_not {
            background-image: url("../../../../assets/images/pc_black/home/btn_grey.png");
          }
        }
      }

      .phonePop {
        height: 954px;
        padding: 40px 40px 0 40px;
        background: #2b2c2d;
        border-radius: 24px 24px 0px 0px;

        .popTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 80px;

          p {
            font-size: 36px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }

          .closeIcon {
            width: 40px;
            height: 40px;
          }
        }

        .popCenter {
          .smallTitle {
            font-size: 32px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }

          .popAddress {
            margin-top: 52px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 44px;
            border-bottom: 2px solid #333333;
            margin-bottom: 20px;

            input {
              padding: 0;
              background: #2b2c2d;
              border: none;
              font-size: 32px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              width: 95%;
            }

            .closeReset {
              width: 28px;
              height: 28px;
            }
          }

          .wallet_desc {
            display: flex;
            align-items: center;
            margin-bottom: 58px;

            img {
              width: 20px;
            }

            p {
              font-size: 20px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff8686;
              margin-left: 5px;
            }
          }

          .popBottom {
            margin-bottom: 102px;

            .popPassword {
              margin-top: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .passWordGroup {
                position: relative;

                input {
                  width: 103px;
                  height: 116px;
                  background: rgba(255, 255, 255, 0.15);
                  border: none;
                  color: #ffffff;
                  font-size: 24px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  text-align: center;
                }

                .circleBox {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 103px;
                  height: 116px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  opacity: 0;

                  .circle {
                    background: #fff;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                  }
                }

                .isShow {
                  -webkit-animation: opacity0-10 0.1s 0.5s both;
                  animation: opacity0-10 0.1s 0.5s both;
                }

                @-webkit-keyframes opacity0-10 {
                  0% {
                    opacity: 0;
                  }

                  100% {
                    opacity: 1;
                  }
                }

                @keyframes opacity0-10 {
                  0% {
                    opacity: 0;
                  }

                  100% {
                    opacity: 1;
                  }
                }
              }
            }

            .popForgot {
              text-align: right;
              font-size: 20px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff8686;
              margin-top: 20px;
            }
          }

          .passOnButton {
            margin: 0;
            width: 100%;
            height: 88px;
            border-radius: 6px;
            color: #1e2020 !important;
            background-color: #00ffb1 !important;
            background-size: 100% 100%;
            font-weight: 500;
            box-shadow: none;

            span {
              font-size: 32px;
            }
          }
        }
      }

      /deep/.van-overlay {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
